<template>
 <div class="Guide">
     <div class="title">
         你想去哪儿？
     </div>
     <div v-for="(e,i) in routeslist" :key="i" @click="topage(e.path)" v-if="i>0&&i!=routeslist.length-1" class="content">
        {{e.path | format}}
     </div>
 </div>
</template>

<script>
 import routeslist from '@/router/routelist'
 export default {
   name:'Guide',   
   data() {
     return {
         routeslist:routeslist
     }
   },
   methods:{
       topage(e){
         this.$router.push({
             path:e
         });
       }
   },
   filters:{
      format(str){
          return str.replace(/^\//,'');
      } 
   },
   components: {
   }
 }
</script>

<style scoped lang="scss">
@import "../styles/common.scss";
.Guide{
    padding:px2rem(30);
    .title{
        font-size:px2rem(45);
        text-align: center;
        padding-bottom: px2rem(30);
    }
    .content{
        margin-top:px2rem(20);
        font-size:px2rem(35);
        text-decoration:underline;
        color:#78dbf0;
    }
}
</style>
